<template>
  <div
    style="
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;"
  >
    <button
      class="btn"
      @click="prevPage"
      :disabled="currentPage === 1"
      :style="{
        padding: '8px 12px',
        margin: '0 10px',
        cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
        border: 'none',
        backgroundColor: currentPage === 1 ? '#b0c4de' : '#2196f3',
        color: 'white',
        borderRadius: '4px'
      }"
    >上一页</button>
    <span style="margin: 0 10px; font-weight: bold;">当前页: {{ currentPage }} / {{ totalPages }}</span>
    <button
      class="btn"
      @click="nextPage"
      :disabled="currentPage === totalPages"
      :style="{
        padding: '8px 12px',
        margin: '0 10px',
        cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
        border: 'none',
        backgroundColor: currentPage === totalPages ? '#b0c4de' : '#2196f3',
        color: 'white',
        borderRadius: '4px'
      }"
    >下一页</button>
  </div>
</template>

<script>
export default {
  name: "PagiNation",
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    totalPages: {
      type: Number,
      required: true
    }
  },
  emits: ["page-change"],
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit("page-change", this.currentPage + 1);
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit("page-change", this.currentPage - 1);
      }
    }
  }
};
</script>

<style scoped>

</style>

